<template>
    <div>
        <Header class="head">
            <li slot="top" class="icon-cuo11"> <span class="iconfont icon-icon-arrow-left4" @click="jump_totals()"></span></li>
            <li slot="top" class="mag"><span class="title"></span>轻芒杂志</li>
      </Header>
        <section>
            <div class="user">
                <span><img src="images/user.jpg"></span>
                <p>~喵~</p>
            </div>
            <div class="time">
                <h2>
                    无敌猫罐头剩余 <span>5</span> 天
                </h2>
                <p><span class="line1"></span><span class="line2"></span></p>
                <ul>
                    <li>已订阅<span>16</span>个公众号、Feed、和App</li>
                    <li>Pro可订阅30个公众号、Feed和App</li>
                    <li>拥有无敌猫罐头，可以订阅无限个</li>
                </ul>
                <h1></h1>
                <img src="images/myself_02.png">
                <div class="text">
                    <p>每有一个从来解锁Pro的账号，使用你的邀请码解锁成功，即可获得特定数量的无敌猫罐头，亦即延长特定期限的无限订阅权限。无敌猫罐头自动发放，上不封顶。</p>
                    <p>使用任何软件或方式不正当参与，或在邀请过程中有任何违反法规的行为，轻芒有权单方面取消邀请资格或收回已发放的权益。</p>
                    <p>任何因不可抗力、网络、通讯线路故障、计算机大规模瘫痪、存在大量作弊行为等非轻芒原因导致邀请机制出现异常情况，轻芒有权采取包括但不限于通过各种方式消除异常情况或调整、暂停、取消本机制等措施，因此造成用户损失的，轻芒不承担任何责任。</p>
                </div>
            </div>
        </section>
        <footer>
            <h2>无敌猫罐头投喂记录</h2>
            <ul>
                <li><span>成功邀请了 守己不安分</span><span class="day">+ 10天</span></li>
                <li><span>成功邀请了 此去经年</span><span class="day">+ 10天</span></li>
                <li><span>成功邀请了 卟灵卟灵</span><span class="day">+ 10天</span></li>
                <li><span>成功邀请了 淮南以南不是南</span><span class="day">+ 10天</span></li>
                <li><span>成功邀请了 调儿啷当</span><span class="day">+ 10天</span></li>

            </ul>
            <button>
                延长无敌猫罐头
            </button>
        </footer>
    </div>
</template>

<script>
import Header from "@/components/index_head.vue"
export default {
    components:{
        Header
    },
    methods:{
        jump_totals(){
            this.$router.go(-1)
        }
    }

}
</script>

<style lang="scss" scoped>
.head{
    display: flex;
    // justify-content: flex-start;
    font-size: .18rem;
    font-weight: bold;
    .iconfont{
        font-size: .18rem;
        margin: 0 0 0 .17rem ;
    }
    .mag{
        margin-left: .32rem;

    }
    .icon-icon-arrow-left4{
        display: block;
        margin-top: .04rem;
    }
    .url1{
        // flex:35;
        margin: 0 .15rem;
     
    }
    .mag .title{
        font-weight: 100;
    }
}
section{
    box-sizing: border-box;
    padding: 0 .2rem;
    .user{
        text-align: center;
    }
}
.user{
    margin-top: .4rem;
    // span{
    //     width: .7rem;
    //     height: .7rem;
    //     display: block;
    //     border-radius: 50%;
    //     border: 3px solid #fedd00;
    //     margin:auto
    // }
    img{
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        border: 3px solid #fedd00;
    

    }
    p{
        margin: .1rem 0 .5rem 0;
        font-size: .3rem;
    }
}
.time{
    h2{
        font-size: .2rem;
    }
    p{
        display: flex;
        margin: .1rem 0;
        span{
            display: block;
            height: .04rem;
        }
        .line1{
            width: 1.9rem;
            background: black;
        }
        .line2{
            width: .9rem;
            background: #cacaca;
        }
    }
    ul{
        margin: 0 0 .3rem 0;
    }
    ul li{
        font-size: .14rem;
        line-height: .2rem;
        list-style-type: disc;
        margin-left: .2rem;
    }
    h1{
        font-size: .34rem;
        line-height: .4rem;
    }
    img{
        width: 100%;
    }
}
.text{
    margin-bottom: .35rem;
    p{
        margin:0 0 .15rem 0;
        font-size: .12rem;
        line-height: .16rem;
        color: #767676;
    }
}
footer{
    box-sizing: border-box;
    padding: 0 .2rem;
    h2{
        font-size: .18rem;
        margin: 0 0 .1rem 0;
    }
    ul{
        li{
            display: flex;
            justify-content: space-between;
            height: .43rem;
            line-height: .43rem;
            border-bottom: .02rem solid #f9f9f9;
            font-size: .14rem;
        }
        .day{
            font-size: .12rem;
        }
    }
    button{
        width: 100%;
        height: .45rem;
        color: #ffffff;
        background: black;
        border-radius: .27rem;
        font-size: .12rem;
        margin: 0 0 .15rem 0;
    }
}
</style>